<template>
	<view>
		<video class="myVideo" id="myVideo"
			:src="videoSrc" 
			v-show="showVideo"
			@fullscreenchange="videoControl">
		</video>
		<view class="content">
			<view class="label">
				<view @tap="loadRatings(index)" v-for="(label,index) in labelList" :class="{'on':index==labelIndex}" :key="label.type">
					{{label.name}}({{label.number}})
				</view>
			</view>
			<view class="list">
				<view class="row" v-for="(row, Rindex) in ratingsList" :key="Rindex">
					<view class="left">
						<view class="face">
							<image :src="row.face"></image>
						</view>
					</view>
					<view class="right">
						<view class="name-date">
							<view class="username">
								{{row.username}}
							</view>
							<view class="date">
								{{row.date}}
							</view>
						</view>
						<view class="spec">
							{{row.spec}}
						</view>
						<view class="first">
							<view class="rat">
								{{row.content}}
							</view>
							<view class="img-video">
								<view class="box" @tap="playVideo(item.path)" v-for="item in row.video" :key="item.path">
									<image :src="item.img" mode="aspectFill"></image>
									<view class="playbtn">
										<view class="icon iconfont">&#xe7e9;</view>
									</view>
								</view>
								<view class="box" @tap="showBigImg(item,row.img)"  v-for="item in row.img" :key="item">
									<image :src="item" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelList:[
					{name:'全部',number:25,type:'all'},
					{name:'好评',number:23,type:'good'},
					{name:'中评',number:1,type:'secondary'},
					{name:'差评',number:1,type:'poor'},
					{name:'有图',number:12,type:'img'},
					{name:'视频',number:2,type:'video'},
					{name:'追加',number:2,type:'append'}
				],
				labelIndex: 0,
				ratingsList: [],
				videoSrc: '',
				videoContext: null,
				showVideo: true
			}
		},
		onLoad() {
			// #ifdef MP
			this.showVideo = false
			// #endif
			try {
				const comments = uni.getStorageSync('comments')
				if(comments) {
					this.ratingsList = comments
					// console.log(this.ratingsList )
				}
			} catch(e) {
				console.log(e)
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			loadRatings(index) {
				this.labelIndex = index
			},
			showBigImg(image, images) {
				// 预览图片
				uri.previewImage({
					current: image,
					urls: images
				})
			},
			playVideo(path) {
				console.log(path)
				this.videoSrc = path
				
				// 全屏播放
				this.$nextTick(() => {
					this.videoContext.requestFullScreen({
						direction: 0
					})
				})
				
				// #ifdef MP
				this.showVideo = false
				// #endif
			},
			videoControl(e) {
				console.log(e)
				if(e.detail.fullScreen) {	//	全屏
					// 自动播放
					this.videoContext.play()
				} else {	//	退出全屏
					// this.videoContext.pause()
					// 停止播放
					this.videoPause()
				}
			},
			videoPause() {
				this.videoSrc = ''
				
				// #ifdef MP
				this.showVideo = false
				// #endif
			}
		}
		
	}
</script>

<style lang="scss">
.myVideo{
	position: fixed;
	top: 50%;
	right: 100%;
	// #ifdef  MP
	top: 0;
	right: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	// #endif
}
	
.content{
	width: 94%;
	padding: 0 3%;
	
	view{
		display: flex;
	}
	
	.label{
		width: 100%;
		flex-wrap:wrap;
		
		view{
			height: 50rpx;
			padding: 0 20rpx;
			margin: 10rpx 20rpx 10rpx 0;
			align-items: center;
			border:solid 1rpx #ddd;
			border-radius: 40rpx;
			font-size: 26rpx;
			color: #555;
			background-color: #f9f9f9;
			
			&.on{
				border:solid 1rpx #f06c7a;
				color: #f06c7a;
			}
		}
	}
	
	.list{
		width: 100%;
		padding: 20rpx 0;
		flex-wrap: wrap;
		
		.row{
			width: 100%;
			margin-top: 30rpx;
		
			.left{
				width: 10vw;
				margin-right: 10rpx;
				flex-shrink: 0;
		
				.face{
					width: 100%;
					
					image{
						width: 10vw;
						height: 10vw;
						border-radius: 100%;
					}
					
				}
			}
			.right{
				width: 100%;
				flex-wrap: wrap;
				
				.name-date{
					width: 100%;
					justify-content: space-between;
					align-items: baseline;
					
					.username{
						font-size: 32rpx;
						color: #555;
					}
					
					.date{
						font-size:28rpx;
						color: #aaa;
					}
				}
				
				.spec{
					width: 100%;
					color: #aaa;
					font-size: 26rpx;
				}
				
				.first{
					width: 100%;
					flex-wrap: wrap;
					
					.rat{
						font-size: 30rpx;
					}
					
					.img-video{
						width: 100%;
						flex-wrap: wrap;
						
						.box{
							width: calc((84.6vw - 50rpx)/4);
							height: calc((84.6vw - 50rpx)/4);
							margin: 5rpx 5rpx;
							position: relative;
							justify-content: center;
							align-items: center;
							
							image{
								width: 100%;
								height: 100%;
								position: absolute;
								border-radius: 10rpx;
							}
							
							.playbtn{
								position: absolute;
								
								.icon{
									font-size: 80rpx;
									color: rgba(255,255,255,.9)
								}
							}
						}
					}
				}	
			}
		}
	}
}
</style>


